<template>
	<view>
		<u-navbar back-icon-color="#ffffff" title="新增收货地址" title-color="#ffffff" :background="background"></u-navbar>
		<view class="content">
			<u-form :model="form" :rules="rules" ref="uForm" :errorType="errorType">
				<u-form-item :leftIconStyle="{ color: '#888', fontSize: '32rpx' }" label-width="150" :label-position="labelPosition" label="收货人" prop="receiver">
					<u-input :border="border" placeholder="请输入收货人姓名" v-model="form.receiver" type="text"></u-input>
				</u-form-item>
				<u-form-item :leftIconStyle="{ color: '#888', fontSize: '32rpx' }" label-width="150" :label-position="labelPosition" label="店铺名称" prop="store">
					<u-input :border="border" placeholder="请输入店铺名称" v-model="form.store" type="text"></u-input>
				</u-form-item>
				<u-form-item :rightIconStyle="{ color: '#888', fontSize: '32rpx' }" :label-position="labelPosition" label="联系方式" prop="phoneNum" label-width="150">
					<u-input :border="border" placeholder="请输入手机号" v-model="form.phoneNum" type="number"></u-input>
				</u-form-item>
				<u-form-item :label-position="labelPosition" label="收货地址" prop="region" label-width="150">
					<u-input :border="border" type="select" :select-open="pickerShow" v-model="form.region" placeholder="请选择地区" @click="pickerShow = true"></u-input>
				</u-form-item>
				<!-- 				<u-form-item :label-position="labelPosition" label="店铺定位" prop="location" label-width="150">
					<u-input :border="border" placeholder="定位店铺位置" v-model="form.location" type="text"></u-input>
					<u-button slot="right" type="success" size="mini" @click="getLocation()">获取店铺位置</u-button>
				</u-form-item> -->
				<u-form-item :label-position="labelPosition" label="楼号门牌" prop="address" label-width="150">
					<u-input type="textarea" disabled :border="border" placeholder="请填写详细地址" v-model="form.address" @click="chooseLocation()" />
				</u-form-item>
				<u-form-item :label-position="labelPosition" label="设为默认地址" prop="defaultSign" label-width="200">
					<u-switch v-model="form.defaultSign" slot="right" active-color="#17933f"></u-switch>
				</u-form-item>
			</u-form>
			<view class="button">
				<u-button type="success" @click="submit">{{ button }}</u-button>
			</view>

			<u-picker mode="region" v-model="pickerShow" @confirm="regionConfirm"></u-picker>
			<view><u-toast ref="uToast" /></view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			errorType: ['message'],
			checked: false,
			background: {
				backgroundImage: 'linear-gradient(90deg, rgb(0,164,133), rgb(51,241,205))'
			},
			show: false,
			//
			userInfo: {},
			//
			rules: {
				receiver: [
					{
						required: true,
						message: '请输入收货人姓名',
						trigger: 'blur'
					}
				],
				store: [
					{
						required: true,
						message: '请输入店铺名称',
						trigger: 'blur'
					}
				],
				address: [
					{
						required: true,
						message: '请填写简介'
					}
				],
				phone: [
					{
						required: true,
						message: '请输入手机号',
						trigger: ['change', 'blur']
					},
					{
						validator: (rule, value, callback) => {
							// 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						// 触发器可以同时用blur和change，二者之间用英文逗号隔开
						trigger: ['change', 'blur']
					}
				]
			},
			form: {
				store: '',
				userId: '',
				provinceCode: '',
				cityCode: '',
				countyCode: '',
				address: '',
				longitude: '',
				latitude: '',
				receiver: '',
				phoneNum: '',
				defaultSign: false,
				region: ''
			},
			labelPosition: 'left',
			border: false,
			pickerShow: false,
			//
			defaultRegion: [],
			//
			button: '新增收货地址'
		};
	},
	onLoad(e) {
		try {
			const token = uni.getStorageSync('token');
			if (token) {
				this.userInfo = uni.getStorageSync('userInfo');
				if(!this.userInfo){
					//#ifdef APP-PLUS
					uni.reLaunch({
						url: '/pages/login/index'
					});
					//#endif
					//#ifdef MP-WEIXIN
					uni.reLaunch({
						url: '/pages/login/xcxLogin'
					});
					//#endif
				}
				if (e.addressId) {
					console.log(e);
					this.button = '编辑收货地址';
					this.getAddress(e.addressId);
				}
			} else {
				//#ifdef APP-PLUS
				uni.reLaunch({
					url: '/pages/login/index'
				});
				//#endif
				//#ifdef MP-WEIXIN
				uni.reLaunch({
					url: '/pages/login/xcxLogin'
				});
				//#endif
			}
		} catch (e) {
			// error
		}
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	methods: {
		//
		//
		chooseLocation() {
			let _t = this;
			uni.chooseLocation({
				success: function(res) {
					console.log('位置名称：' + res.name);
					console.log('详细地址：' + res.address);
					console.log('纬度：' + res.latitude);
					console.log('经度：' + res.longitude);
					let addressD;
					if (!res.address) {
						addressD = res.name;
					} else {
						addressD = res.address;
					}
					_t.setStoreAddress(res.longitude + '', res.latitude + '', addressD);
				}
			});
		},
		setStoreAddress(longitude, latitude, address) {
			this.form.address = address;
			this.form.latitude = latitude;
			this.form.longitude = longitude;
			console.log(this.form);
		},
		//
		getAddress(addressId) {
			this.$u.api.searchReceiver({ id: addressId }).then(res => {
				console.log('searchReceiver');
				console.log(res);
				if (res.data.content.length == 0) {
					this.$refs.uToast.show({
						title: '暂无该地址',
						type: 'error'
					});
					setTimeout(() => {
						this.$u.route({
							type: 'navigateBack'
						});
					}, 1500);
				} else {
					this.form = res.data.content[0];
					this.form.region = this.form.provinceCode + '-' + this.form.cityCode + '-' + this.form.countyCode;
					/* this.defaultRegion[0] = strs[0];
					this.defaultRegion[1] = strs[1];
					this.defaultRegion[2] =  this.form.countyCode;
					this.pickerShow = true; */
				}
			});
		},
		change(status) {
			console.log(status);
		},
		showRegionPicker() {
			this.show = true;
		},
		submit() {
			this.$refs.uForm.validate(valid => {
				console.log(this.form);
				this.form.userId = this.userInfo.id;
				//this.form.address = this.form.provinceCode + this.form.cityCode + this.form.countyCode + this.form.address;
				if (valid) {
					this.$u.api.createReceiver(this.form).then(res => {
						console.log('createReceiver');
						console.log(res); 
						if (res.data != null) {
							this.$refs.uToast.show({
								title: '新增地址成功',
								type: 'success'
							});
							uni.navigateBack({
							    delta: 1
							});
							/* this.$u.route({
								type: 'back'
							}); */
						} else {
							this.$refs.uToast.show({
								title: '新增地址失败',
								type: 'error'
							});
						}
					});
					console.log('验证通过');
				} else {
					console.log('验证失败');
				}
			});
		},
		// 选择地区回调
		regionConfirm(e) {
			console.log(e);
			this.form.provinceCode = e.province.label;
			this.form.cityCode = e.city.label;
			this.form.countyCode = e.area.label;
			this.form.region = e.province.label + '-' + e.city.label + '-' + e.area.label;
		},
		// radio选择发生变化
		radioGroupChange(e) {
			this.form.defaultSign = e;
		},
		getLocation() {
			uni.getLocation({
				type: 'gcj02', //返回可以用于uni.openLocation的经纬度
				success: function(res) {
					console.log(res);
					const latitude = res.latitude;
					const longitude = res.longitude;
					uni.openLocation({
						latitude: latitude,
						longitude: longitude,
						success: function() {
							console.log('success');
						}
					});
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.content {
	padding: 0 30rpx;
	.button {
		padding-top: 50rpx;
	}
}
</style>
